<template>
  <div class="Box">
    <h1>发现</h1>
    <!-- <Icon class="add" name="add-o" color="#deeef4" size="3rem"></Icon> -->
    <dropdown-menu class="dropdown">
      <dropdown-item v-model="value" :options="option" class="item" @click="add" />
    </dropdown-menu>
    <i></i>
    <article>
      <tag type="success" size="large" @click="toggle1">热门</tag>
      <tag type="danger" size="small" @click="toggle2">网红民宿</tag>
      <ul>
        <li v-for="i in HomeMsgData" :key="i.id" :id="i.id" ref="myLi">
          <img :src="i.picture" alt="" />
          <i class="fa fa-fighter-jet" aria-hidden="true">{{ i.city }}</i>
          <p>{{ i.homestaysName }}</p>
          <div class="li-div">
            <div class="li">
              <img style="border-radius: 50%" :src="i.avatar" alt="" />
              <em>{{ i.homestaysTitle }}</em>
            </div>
            <div class="li-li-div">
              <i class="fa fa-commenting-o" aria-hidden="true"><badge :content="20" /></i>
              <i class="fa fa-thumbs-o-up" aria-hidden="true"><badge :content="count ? count : 0" @click="sum(i.id)" /></i>
            </div>
          </div>
        </li>
      </ul>
    </article>
  </div>
</template>
<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { DropdownMenu, DropdownItem, Tag, Badge, Icon } from 'vant'
import { getHomeMsg } from '../utils/api'
import { getDynamicAPI } from '../services/find'
// 选中的类别
const value = ref('全部')
const HomeMsgData = ref([])
const count = ref(0)
let num = ref(0)
const myLi = ref()
const option = [
  { text: '全部', value: '全部' },
  { text: '热门', value: '热门' },
  { text: '网红', value: '网红' },
]
// 挂载完成后读取本地的值
onMounted(() => {
  count.value = localStorage.getItem('sum')
})
// 点击加1
const sum = (id) => {
  console.log(1)
  console.log(id)
  myLi.value.forEach((item) => {
    if (item.id == id) {
      console.log(111)
      if (localStorage.getItem('sum')) {
        console.log(22)
        num.value = localStorage.getItem('sum')
        num.value++
        localStorage.setItem('sum', num.value)
        count.value = localStorage.getItem('sum')
      } else {
        localStorage.setItem('sum', 0)
      }
    }
  })
}
getMsg()
function getMsg() {
  getDynamicAPI().then((res) => {
    HomeMsgData.value = res.data
    console.log(HomeMsgData.value)
  })
}
function Hot() {
  getDynamicAPI().then((res) => {
    let newData = res.data.filter((item) => item.city == '郑州市')
    HomeMsgData.value = newData
  })
}
function InternetCelebrity() {
  getDynamicAPI().then((res) => {
    let newData = res.data.filter((item) => item.city == '安阳市')
    HomeMsgData.value = newData
  })
}
const add = () => {
  if (value.value == '全部') {
    getMsg()
  } else if (value.value == '热门') {
    Hot()
  } else if (value.value == '网红') {
    InternetCelebrity()
  }
}
const toggle1 = () => {
  getMsg()
}
const toggle2 = () => {
  InternetCelebrity()
}
</script>

<style lang="scss">
body,
html,
#app {
  height: 100%;
}
.Box {
  padding: 1rem;
  height: 100%;
  background: linear-gradient(0deg, #ffffff, #deeef4);
  i {
    display: block;
    clear: both;
  }
  .add {
    position: absolute;
    bottom: 6vh;
    left: 42vw;
  }
  h1 {
    width: 40%;
    float: left;
  }
  .dropdown {
    width: 25%;
    float: right;
    margin-top: 0.625rem;
  }
  .van-dropdown-menu__bar {
    height: 2rem;
  }
  .van-dropdown-menu__bar {
    border-radius: 1.25rem;
  }
  .van-ellipsis {
    font-weight: 700;
    font-size: 1.2rem;
  }
  article {
    width: 100%;
    margin-top: 1.25rem;
    overflow: auto;
    .van-tag--large {
      width: 13%;
      background-color: #fff;
      color: black;
      border-radius: 1.25rem;
      margin-right: 0.9375rem;
      font-weight: 700;
    }
    .van-tag--small {
      width: 20%;
      color: #535353;
      background-color: rgba($color: #000000, $alpha: 0);
    }
    ul {
      list-style: none;
      display: flex;
      margin-top: 1.25rem;
      flex-wrap: wrap;
      gap: 0.7rem;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
        width: 48%;
        background-color: #fff;
        border-radius: 0.625rem;
        img {
          width: 100%;
        }
        p {
          font-weight: 700;
          line-height: 1.8rem;
          margin-top: 0.5rem;
          padding: 0 0.5rem;
        }
        i {
          margin-top: 0.5rem;
          padding: 0 0.2rem;
        }
        .li-div {
          display: flex;
          margin-top: 1rem;
          padding: 0 0.5rem;
          .li {
            width: 4.25rem;
            img {
              width: 1.25rem;
              vertical-align: bottom;
              margin-right: 0.5rem;
            }
            em {
              display: inline-block;
              width: 2rem;
              font-style: normal;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .li-li-div {
            display: flex;
            width: 2.5rem;
            i {
              display: flex;
              .van-badge--top-right {
                transform: translate(3%, -39%);
              }
            }
          }
        }
      }
    }
  }
}
</style>
